<template>
  <tm-sheet
    :color="props.color"
    :_class="[customClass, 'flex-col']"
    :_style="[customCSSStyle]"
    :followTheme="props.followTheme"
    :dark="props.dark"
    :round="props.round"
    :shadow="props.shadow"
    :outlined="props.outlined"
    :border="props.border"
    :borderStyle="props.borderStyle"
    :borderDirection="props.borderDirection"
    :text="props.text"
    :transprent="props.transprent"
    :linear="props.linear"
    :linearDeep="props.linearDeep"
    :width="props.width"
    :height="props.height"
    :margin="props.margin"
    :padding="props.padding"
  >
    <view class="flex-row flex flex-between pt-24">
      <slot name="title"
        ><tm-text :font-size="28" _class="text-weight-b" :label="props.title"></tm-text
      ></slot>
      <slot name="status"
        ><tm-text
          :followTheme="false"
          :color="props.statusColor"
          :font-size="26"
          :label="props.status"
        ></tm-text
      ></slot>
    </view>
    <tm-divider></tm-divider>
    <view class="pb-24 flex wrap">
      <slot name="content"
        ><tm-text :font-size="26" _class="wrap" :label="props.content"></tm-text
      ></slot>
    </view>
    <view class="flex pb-16">
      <slot name="action"></slot>
    </view>
  </tm-sheet>
</template>

<script lang="ts" setup>
  /**
   * 卡片
   */
  import { computed, PropType } from 'vue';
  import { custom_props, computedClass, computedStyle } from '../../tool/lib/minxs';
  import tmSheet from '../tm-sheet/tm-sheet.vue';
  import tmText from '../tm-text/tm-text.vue';
  import tmDivider from '../tm-divider/tm-divider.vue';
  const props = defineProps({
    ...custom_props,
    shadow: {
      type: [Number],
      default: 2,
    },
    round: {
      type: [Number],
      default: 6,
    },
    border: {
      type: [Number],
      default: 0,
    },
    margin: {
      type: Array as PropType<Array<number>>,
      default: () => [32, 0, 32, 24],
    },
    padding: {
      type: Array as PropType<Array<number>>,
      default: () => [24, 0],
    },
    transprent: {
      type: [Boolean],
      default: false,
    },
    color: {
      type: String,
      default: 'white',
    },
    width: {
      type: [Number],
      default: 0,
    },
    height: {
      type: [Number],
      default: 0,
    },
    title: {
      type: [String],
      default: '',
    },
    status: {
      type: [String],
      default: '',
    },
    statusColor: {
      type: [String],
      default: 'primary',
    },
    content: {
      type: [String],
      default: '',
    },
  });
  //自定义样式：
  const customCSSStyle = computed(() => computedStyle(props));
  //自定类
  const customClass = computed(() => computedClass(props));
</script>
<style></style>
